
 

	<style type="text/css">
  		#selectable .ui-selecting { background: #FECA40; }
  		#selectable .ui-selected { background: #F39814; color: white; }
  		#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  		#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
	</style>
	

	<!-- jqueryui / item选择 start-->
	<!-- 框架的组件文档 "https://www.jqueryui.org.cn/demo/5640.html" -->
	<p id="feedback">
		<span>您已经选择了：</span> <span id="select-result">无</span>。
	</p>
	<ul id="selectable" style="list-style: none;padding: 0;margin: 0">
	  <li class="ui-widget-content">Item 1</li>
	  <li class="ui-widget-content">Item 2</li>
	  <li class="ui-widget-content">Item 3</li>
	  <li class="ui-widget-content">Item 4</li>
	  <li class="ui-widget-content">Item 5</li>
	  <li class="ui-widget-content">Item 6</li>
	  <li class="ui-widget-content">Item 7</li>
	</ul>
	</select>
 
	<script type="text/javascript">
		 $( "#selectable" ).selectable({
		 	stop: function() {
	        var result = $( "#select-result" ).empty();
	        //将选中的条目序列号显示到span标签
	        $( ".ui-selected", this ).each(function() {
	          var index = $( "#selectable li" ).index( this );
	          result.append( " #" + ( index + 1 ) );
	        });
	      }
		 });
	</script>
	<!-- jqueryui / item选择 end-->